const getValue = key => `theme${key+1}`;
export default {
	chooseTheme(tree) {
		const area = tree.initArea({ span: 24 });
		const { $theme, $theme1, $theme2, $theme3, $theme4 } = this.$mapping.J_color;
		const themes = [$theme1, $theme2, $theme3, $theme4];
		area.add(
			area.jsSelect({
				name: 'theme',
				placeholder: '选择主题',
				style: { display: 'block' },
				initValue: getValue(themes.findIndex(val => val === $theme)),
				options: themes.map((color, key) => {
					return {
						label: color,
						value: getValue(key),
						bind: {
							style: {
								margin: '4px 10px',
								backgroundColor: color,
							}
						},
						renderOption: () => area.jsRender(h => h('div', {
							domProps: {
								innerText: color
							},
							style: {
								color: 'white'
							}
						}))
					}
				})
			})
		)
	}
}
